<?php
    $con=mysqli_connect("localhost","root","","hhuy");
    // Check connection
    if (mysqli_connect_errno())
    {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
        die();
    }
    
    $d = mysqli_query($con,"SELECT * FROM english_dialogue WHERE id = 1");
    $d_r = mysqli_fetch_array($d);
    
    mysqli_close($con);
?>
<!DOCTYPE HTML>
<html>
    <head>
      
        <meta charset="utf-8" />
        <title>English - March 17</title>
        <script src="/js/jquery/jquery-2.1.0.js"></script>
        <script src="/js/jquery/jquery.blockUI.js"></script>
        
    </head>
<style type="text/css">
<!--
    b {
        font-size: 18px;
    }
-->
</style>
    <body>
        <h3><?php echo $d_r['title']; ?></h3>
        <div id="updateDiv"></div>
        <div>
            <input type="button" value="Submit" onclick="ajax_submit();" />
            <input type="button" value="Translate" onclick="ajax_translate();" style="display: none;" />
        </div>
        <div style="display: none;" class="growlUI">
            <h1>Notification</h1>
            <h2>Ssuccess!</h2>
        </div>
<script type="text/javascript">
<!--
    var ajax_result_timeout = true;
    var ajax_result_run = false;
	setTimeout("ajax_result()", 1000);
    function ajax_result()
    {
        ajax_result_run = true;
        $.ajax({
            "url" : 'function/ajax.php?d_id=1',
            "dataType" : "json",
        }).done(function(data){
            
            if(data.result == false && ajax_result_timeout)
                setTimeout("ajax_result()", 500);
            else
                ajax_result_run = false;
            $('#updateDiv').html(data.dialogue);
            
        })
    }
    
    function ajax_submit()
    {
        ajax_result_timeout = false;
        if (ajax_result_run)
        {
            setTimeout("ajax_submit()", 1000);
            return;
        }
        
         $.blockUI({ 
            message: $('div.growlUI'), 
            fadeIn: 700, 
            /*fadeOut: 700, 
            timeout: 2000,*/ 
            showOverlay: false, 
            centerY: false, 
            css: { 
                width: '350px', 
                top: '10px', 
                left: '', 
                right: '10px', 
                border: 'none', 
                padding: '5px', 
                backgroundColor: '#000', 
                '-webkit-border-radius': '10px', 
                '-moz-border-radius': '10px', 
                opacity: .6, 
                color: '#fff' 
            } 
        });
        $.ajax({
            "url" : 'function/ajax_submit.php?d_id=1',
            "dataType" : "json",
        }).done(function(data){
            $('#updateDiv').html(data.dialogue);
           $.unblockUI();
        }) 
    }
    
    function ajax_translate()
    {
        ajax_result_timeout = false;
        if (ajax_result_run)
        {
            setTimeout("ajax_translate()", 1000);
            return;
        }
        $.blockUI({ 
            message: $('div.growlUI'), 
            fadeIn: 700, 
            /*fadeOut: 700, 
            timeout: 2000,*/ 
            showOverlay: false, 
            centerY: false, 
            css: { 
                width: '350px', 
                top: '10px', 
                left: '', 
                right: '10px', 
                border: 'none', 
                padding: '5px', 
                backgroundColor: '#000', 
                '-webkit-border-radius': '10px', 
                '-moz-border-radius': '10px', 
                opacity: .6, 
                color: '#fff' 
            } 
        });
        $.ajax({
            "url" : 'function/ajax_translate.php?d_id=1',
            "scriptCharset": "utf-8" ,
            "contentType": "application/x-www-form-urlencoded; charset=UTF-8",
        }).done(function(data){
            $('#updateDiv').html(data);
           $.unblockUI();
        }) 
    }
    function ajax_input_value(obj)
    {
        $.ajax({
            "url" : 'function/ajax_input_value.php?d_id=1&v='+obj.value+'&p=' + obj.getAttribute('p'),
            "dataType" : "json",
        }).done(function(data){
            console.log('ok');
        })
    }
-->
</script>
    </body>
</html>
